<template >
    <div class="count_class" >
        <el-row>
            <el-col :span="14" :offset="4">
                <el-form ref="formdata" :model="form" label-width="100px">
                    <el-form-item prop="projectName" label="项目名称">
                        <el-input v-model="form.projectName"></el-input>
                    </el-form-item>
                    <el-form-item prop="region" label="项目类型">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="类型一" value="shanghai"></el-option>
                        <el-option label="类型二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="date1" label="开始时间">
                        <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="二维码类型">
                      <el-select clearable v-model="selcodetype" placeholder="请选择">
                        <el-option
                          v-for="item in basic.codetype"
                          :key="item.dict_key"
                          :label="item.dict_value"
                          :value="item.dict_value">
                        </el-option>
                      </el-select>
                     </el-form-item>
                    <el-form-item prop="delivery" label="是否混匀">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item prop="type" label="数据分析">
                        <el-checkbox-group v-model="form.type">
                        <el-checkbox label="结果一" name="type"></el-checkbox>
                        <el-checkbox label="结果二" name="type"></el-checkbox>
                        <el-checkbox label="结果三" name="type"></el-checkbox>
                        <el-checkbox label="结果四" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item prop="resource" label="是否急诊">
                        <el-radio-group v-model="form.resource">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="desc" label="备注">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="createPDF417">立即创建</el-button>
                        <el-button  @click="resetForm('formdata')">重置</el-button>
                    </el-form-item>
                    </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" :offset="6">
                <canvas id="mycanvas"></canvas>
            </el-col>
        </el-row>
        
     
       
    </div>
</template>

  
<script>
  
    import bwipjs from 'bwip-js' 
    import base from '@/utils/base64'  //引入
    import {disposeDict} from '@/utils/dicts'
    export default {
        name: "count_to",
        components: {
          
        },
        data() {
            return {
                basic:{
                    codetype:disposeDict('codetype','arr'),
                },
                selcodetype:'',
                form: {
                    projectName: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                    }
            }
        },
        created(){
            console.log(disposeDict('codetype','obj'))
            console.log(disposeDict('facType','obj'))

        },
        computed: {
            // 返回自定义样式
            getClass() {
                return ['count-to-number']
            }
        },
        mounted(){

 
//  this.createPdf(PDF417)
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            addDomain() {
                this.dynamicValidateForm.domains.push({
                value: '',
                key: Date.now()
                });
            },
            createPDF417(){
                let data=this.form
                let _this=this
                console.log(data)
                console.log(JSON.stringify(data))

                //生成pdf417
                let canvas = bwipjs.toCanvas('mycanvas', {
                    
                    bcid:        _this.selcodetype?_this.selcodetype:'pdf417',       // Barcode type
                    text:        JSON.stringify(data),    // Text to encode
                    scale:       3,               // 3x scaling factor
                    height:      10,              // Bar height, in millimeters
                    includetext: true,            // Show human-readable text
                    textxalign:  'center',        // Always good to set this
                });
            },
            

        }
    }
</script>
<style scoped>
body{
        font-size: 24px;
}
.el-input{
    width: 70%;
}
    .count_class {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .count-to-number {
        font-size: 8em;
        color: #4d63bc;
        font-weight: 300;
    }

    .prefix-style {
        font-size: 2em;
    }
</style>
